<!--
 * @Author: 叫我龟先生 yyxxkahhh@163.com
 * @Date: 2022-09-22 21:14:36
 * @LastEditors: 叫我龟先生 yyxxkahhh@163.com
 * @LastEditTime: 2022-09-23 20:11:18
 * @FilePath: \my_vue_03\src\作业3.喜欢的狗.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <Dog3
    v-for="(item,index) in arr"
    :key="index"
    :dogImgUrl='item.dogImgUrl'
    :dogName='item.dogName'
    @like = 'like'
    ></Dog3>
    <span>喜欢的狗</span>
    <ul>
      <li v-for="(item,index) in newArr"
      :key="index"
      >{{item}}</li>
    </ul>

  </div>
</template>

<script>
//喜欢的狗要显示出来，建立一个新的空数组接收选中的喜欢的狗，
//喜欢的狗要然后遍历出来
//设置一个自定义的点击事件，点击一次就在新的空数组中传入点击的狗，
import Dog3 from './components/Dog3.vue'
export default {
components:{
    Dog3
},
data() {
    return {
      arr: [
        {
          dogImgUrl:
            "https://t7.baidu.com/it/u=938651884,1522785317&fm=193&f=GIF",
          dogName: "博美，已绝育",
        },
        {
          dogImgUrl:
            "https://t7.baidu.com/it/u=1797095996,3240592019&fm=193&f=GIF",
          dogName: "泰迪，低价出",
        },
        {
          dogImgUrl:
            "https://t7.baidu.com/it/u=1951548898,3927145&fm=193&f=GIF",
          dogName: "金毛，超可爱",
        },
        {
          dogImgUrl:
            "https://t7.baidu.com/it/u=3332251293,4211134448&fm=193&f=GIF",
          dogName: "哈士奇，好养活",
        },
        {
          dogImgUrl:
            "https://t7.baidu.com/it/u=848096684,3883475370&fm=193&f=GIF",
          dogName: "阿拉斯加，不拆家",
        },
        {
          dogImgUrl:
            "https://t7.baidu.com/it/u=1517419723,1472324058&fm=193&f=GIF",
          dogName: "萨摩耶，很听话",
        },
      ],
      newArr:[]
    };
  },
  methods:{
    like(dogName){
      this.newArr.push(dogName)
    }
  }
  
}
</script>

<style>

</style>